<style scoped>
  /*.tabbbar-top-line-color:after {border-color: red !important;} */
</style>
<template>
  <div id="app">
    <yd-tabbar class="menu_wrap" color="#676767" activeColor="#d3ac6f" v-show="!hideNav" fixed>
        <yd-tabbar-item 
          v-for="(nav, index) in navs"
            :title="nav.title" 
            :link="nav.link"
            :key="index"
            :active="nav.active">
            <yd-icon :name="nav.name" slot="icon" size="0.54rem"></yd-icon>
        </yd-tabbar-item>
    </yd-tabbar>
    <router-view></router-view>
  </div>
</template>
<script>
const navs = [
  {
    title: '首页',
    name: 'home',
    link: '/',
    active: true
  },
  {
    title: '分类',
    name: 'type',
    link: '/type',
    active: false
  },
  {
    title: '购物车',
    name: 'shopcart',
    link: '/cart',
    active: false
  },
  {
    title: '个人中心',
    name: 'ucenter-outline',
    link: '/user',
    active: false
  }
]

export default {
  name: 'app',
  data() {
    return {
      navs: navs,
      hideNav: false
    }
  },
  created() {
    this.routeChange()
  },
  watch: {
    // 控制导航选中及隐藏
    '$route.path'(val){
      this.routeChange()
    }
  },
  methods: {
    routeChange() {
      const meta = this.$route.meta
      const index = meta.in || 0
      this.navs.forEach( nav=> (nav.active = false) )
      this.navs[index].active = true
      if (meta.hideNav) {
        this.hideNav = true 
      }else{
        this.hideNav = false 
      }
    }
  }
}
</script>

